<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="调查问卷"></uni-navbar></view>

		<view class="detail-info" v-if="questionInfo.id">
			<view class="info-title">
				<view class="title-top">{{ questionInfo.title }}</view>
				<!-- <view class="title-btm">
					<text class="btm-time">{{ questionInfo.createTime | parseTime('{y}-{m}-{d}') }}</text>
					<text class="btm-name">{{ questionInfo.nodeStatusName }}</text>
				</view> -->
			</view>
			<view class="tip-line">
				<u-line-progress class="progress" :active-color="['#FF7783', '#E80824']" :percent="parseInt((num1 / numAll) * 100)"></u-line-progress>
				<text class="span">({{ num1 + '/' + numAll }})</text>
			</view>
			<view class="tip-text">{{ questionInfo.remark || `答卷数据仅用于统计分析，请放心填写。题目选项无对错之分，按照实际情况选择即可。感谢您参加此次问卷调查！` }}</view>
		</view>

		<view class="form-box">
			<u-form :model="form" ref="uForm">
				<u-form-item class="form-item" :required="item.required == '1'" :label="item.no + '、' + item.question" label-position="top" v-for="item in content" :key="item.no" :prop="item.value">
					<block v-if="item.type == '1'">
						<u-radio-group v-model="form[item.value]" :wrap="true" @change="radioGroupChange($event, item.value)">
							<u-radio v-for="sub in item.itemList" :key="sub.itemCode" :name="sub.itemCode">{{ sub.itemCode + '、' + sub.itemText }}</u-radio>
						</u-radio-group>
					</block>

					<block v-else-if="item.type == '2'">
						<u-checkbox-group :wrap="true" @change="checkboxGroupChange($event, item.value)">
							<u-checkbox v-model="sub.checked" v-for="sub in item.itemList" :key="sub.itemCode" :name="sub.itemCode">{{ sub.itemCode + '、' + sub.itemText }}</u-checkbox>
						</u-checkbox-group>
					</block>

					<block v-else><u-input v-model="form[item.value]" input-align="left" type="textarea" placeholder="请输入" :clearable="false" :height="160" :maxlength="-1" @input="numAnswer()" /></block>
				</u-form-item>
			</u-form>
		</view>

		<view class="fiexd-btm" v-show="questionInfo.id"><u-button class="form-btn" type="error" @click="confirm">提交</u-button></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			typeList: {},
			typeMap: {},
			id: '',
			num1: 0,
			numAll: 0,
			userList: [],
			questionInfo: {},
			form: {},
			rules: {},
			content: [],
			play: false
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		this.loadData();
	},
	onReady() {
		// this.$refs.uForm.setRules(this.rules);
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
			} else {
				this.$logout();
			}
		},
		loadData() {
			let url = '/questionnaire/query';
			this.$request(url, {
				id: this.id,
				currentUserId: this.userId
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this.questionInfo = res.data.questionnaire;
				this.userList = res.data.userList;
				try {
					this.content = JSON.parse(this.questionInfo.content);
					console.log(this.content);

					this.content.forEach((item) => {
						item.value = item.no.toString();
						this.form[item.value] = '';
						if (item.required == '1') {
							this.rules[item.value] = [
								{
									required: true,
									message: '请填写' + item.no + '、' + item.question,
									trigger: 'change'
								}
							];
						}
					});
					this.numAll = this.content.length;
					this.$refs.uForm.setRules(this.rules);
				} catch (e) {
					console.log(e);
				}
				console.log(this.form);
			});
		},
		radioGroupChange(e, index) {
			console.log('radioGroupChange', e);
			this.form[index] = e;
			this.numAnswer();
		},
		checkboxGroupChange(e, index) {
			console.log('checkboxGroupChange', e);
			this.form[index] = e.join(',');
			this.numAnswer();
		},
		numAnswer() {
			let arr = [];
			Object.values(this.form).forEach((value) => {
				if (value != null && value != '') {
					arr.push(value);
				}
			});
			this.num1 = arr.length;
		},
		confirm() {
			this.$refs.uForm.validate((valid) => {
				console.log(valid);
				if (!valid) {
					return false;
				} else {
					let replyContent = [];
					Object.keys(this.form).forEach((key) => {
						replyContent.push({
							no: key,
							answer: this.form[key]
						});
					});

					let data = {};
					data = {
						currentUserId: this.userId,
						questionnaireId: this.id,
						replyContent: replyContent
					};

					this.$request('/questionnaire/user/reply', data, {
						load: true
					}).then((res) => {
						this.$msg(res.msg);
						setTimeout(() => {
							let pre = this.$prePage();
							if (pre && pre.loadData) {
								pre.loadData('refresh');
							}
							uni.navigateBack();
						}, 500);
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.progress {
	display: block;
	width: 100%;
}

.tip-line {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	font-size: 14px;
	line-height: 40rpx;
	word-break: keep-all;

	.span {
		margin-left: 20rpx;
	}
}

.tip-text {
	font-size: 14px;
	color: #f5a623;
	line-height: 40rpx;
}

.flex-box {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	// text-indent: 1.5em;
}

.form-box {
	border-top: 20rpx solid $u-border-color;

	.form-item {
		@include mp-flex;
	}
}

.fiexd-btm {
	position: static;
	border-top: 10rpx solid $u-border-color;
	padding: 30rpx;
}
</style>
